<template>
  <el-dialog :title="form.userUid ? '编辑' : '新增'" v-model="visible"
             :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="用户邮箱" prop="userMail">
            <el-input v-model="form.userMail" placeholder="请输入用户邮箱"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label=" 昵称" prop="nickname">
            <el-input v-model="form.nickname" placeholder="请输入 昵称"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label=" 密码" prop="userPsw">
            <el-input v-model="form.userPsw" placeholder="请输入 密码"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="1 男，0 女default是1。" prop="userSex">
            <el-input v-model="form.userSex" placeholder="请输入1 男，0 女default是1。"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="注册IP" prop="registerIp">
            <el-input v-model="form.registerIp" placeholder="请输入注册IP"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="注册时间" prop="registerTime">
            <el-input v-model="form.registerTime" placeholder="请输入注册时间"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="登陆时间" prop="latestLoginTime">
            <el-input v-model="form.latestLoginTime" placeholder="请输入登陆时间"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="此时间记录的是GMT标准时间（long），客户端取到后可以据自已的时区自行转换。" prop="latestLoginTime2">
            <el-input v-model="form.latestLoginTime2" placeholder="请输入此时间记录的是GMT标准时间（long），客户端取到后可以据自已的时区自行转换。"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="登陆IP" prop="latestLoginIp">
            <el-input v-model="form.latestLoginIp" placeholder="请输入登陆IP"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="0是否禁用" prop="userStatus">
            <el-input v-model="form.userStatus" placeholder="请输入0是否禁用"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="0 表示不在线，1 表示在线。" prop="isOnline">
            <el-input v-model="form.isOnline" placeholder="请输入0 表示不在线，1 表示在线。"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="8位数字字母随机数" prop="verificationCode">
            <el-input v-model="form.verificationCode" placeholder="请输入8位数字字母随机数"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="半小时内验证码有效，否则失效" prop="verificationTime">
            <el-input v-model="form.verificationTime" placeholder="请输入半小时内验证码有效，否则失效"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="用户" prop="userAvatarFileName">
            <el-input v-model="form.userAvatarFileName" placeholder="请输入用户"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="用户心情：仿微信哦，60个字符（微信就是这么多" prop="whatSUp">
            <el-input v-model="form.whatSUp" placeholder="请输入用户心情：仿微信哦，60个字符（微信就是这么多"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="最大数量" prop="maxFriend">
            <el-input v-model="form.maxFriend" placeholder="请输入最大数量"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="备注" prop="userDesc">
            <el-input v-model="form.userDesc" placeholder="请输入备注"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="0 表示普通用户1 表示EFEELINK内部的服务小姐。" prop="userType">
            <el-input v-model="form.userType" placeholder="请输入0 表示普通用户1 表示EFEELINK内部的服务小姐。"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="统计报表时使用。" prop="userRegieon">
            <el-input v-model="form.userRegieon" placeholder="请输入统计报表时使用。"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="deviceToken" prop="iosDeviceToken">
            <el-input v-model="form.iosDeviceToken" placeholder="请输入deviceToken"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入手机号码"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="form.realName" placeholder="请输入真实姓名"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="身份证" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入身份证"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="阿里账号" prop="alipayCard">
            <el-input v-model="form.alipayCard" placeholder="请输入阿里账号"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="身份证正面" prop="idCardUrl1">
            <el-input v-model="form.idCardUrl1" placeholder="请输入身份证正面"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="身份证反面" prop="idCardUrl2">
            <el-input v-model="form.idCardUrl2" placeholder="请输入身份证反面"/>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="MissuUsersDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/missusers/missuUsers'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典
const { IM_SEX,在线状态 } = useDict('IM_SEX','在线状态')

// 提交表单数据
const form = reactive({
  userUid:'',
  userMail: '',
  nickname: '',
  userPsw: '',
  userSex: '',
  registerIp: '',
  registerTime: '',
  latestLoginTime: '',
  latestLoginTime2: '',
  latestLoginIp: '',
  userStatus: '',
  isOnline: '',
  verificationCode: '',
  verificationTime: '',
  userAvatarFileName: '',
  whatSUp: '',
  maxFriend: '',
  userDesc: '',
  userType: '',
  userRegieon: '',
  iosDeviceToken: '',
  mobile: '',
  realName: '',
  idCard: '',
  alipayCard: '',
  idCardUrl1: '',
  idCardUrl2: '',
});

// 定义校验规则
const dataRules = ref({
  userMail: [{required: true, message: '用户邮箱不能为空', trigger: 'blur'}],
  nickname: [{required: true, message: ' 昵称不能为空', trigger: 'blur'}],
  userPsw: [{required: true, message: ' 密码不能为空', trigger: 'blur'}],
  userSex: [{required: true, message: '1 男，0 女default是1。不能为空', trigger: 'blur'}],
  registerIp: [{required: true, message: '注册IP不能为空', trigger: 'blur'}],
  registerTime: [{required: true, message: '注册时间不能为空', trigger: 'blur'}],
  latestLoginTime: [{required: true, message: '登陆时间不能为空', trigger: 'blur'}],
  latestLoginTime2: [{required: true, message: '此时间记录的是GMT标准时间（long），客户端取到后可以据自已的时区自行转换。不能为空', trigger: 'blur'}],
  latestLoginIp: [{required: true, message: '登陆IP不能为空', trigger: 'blur'}],
  userStatus: [{required: true, message: '0是否禁用不能为空', trigger: 'blur'}],
  isOnline: [{required: true, message: '0 表示不在线，1 表示在线。不能为空', trigger: 'blur'}],
  verificationCode: [{required: true, message: '8位数字字母随机数不能为空', trigger: 'blur'}],
  verificationTime: [{required: true, message: '半小时内验证码有效，否则失效不能为空', trigger: 'blur'}],
  userAvatarFileName: [{required: true, message: '用户不能为空', trigger: 'blur'}],
  whatSUp: [{required: true, message: '用户心情：仿微信哦，60个字符（微信就是这么多不能为空', trigger: 'blur'}],
  maxFriend: [{required: true, message: '最大数量不能为空', trigger: 'blur'}],
  userDesc: [{required: true, message: '备注不能为空', trigger: 'blur'}],
  userType: [{required: true, message: '0 表示普通用户1 表示EFEELINK内部的服务小姐。不能为空', trigger: 'blur'}],
  userRegieon: [{required: true, message: '统计报表时使用。不能为空', trigger: 'blur'}],
  iosDeviceToken: [{required: true, message: 'deviceToken不能为空', trigger: 'blur'}],
  mobile: [{required: true, message: '手机号码不能为空', trigger: 'blur'}],
  realName: [{required: true, message: '真实姓名不能为空', trigger: 'blur'}],
  idCard: [{required: true, message: '身份证不能为空', trigger: 'blur'}],
  alipayCard: [{required: true, message: '阿里账号不能为空', trigger: 'blur'}],
  idCardUrl1: [{required: true, message: '身份证正面不能为空', trigger: 'blur'}],
  idCardUrl2: [{required: true, message: '身份证反面不能为空', trigger: 'blur'}],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.userUid = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取missuUsers信息
  if (id) {
    form.userUid = id
    getmissuUsersData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {});
  if (!valid) return false;

  try {
    loading.value = true;
    form.userUid ? await putObj(form) : await addObj(form);
    useMessage().success(form.userUid ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getmissuUsersData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>